import React, { Fragment } from 'react'
import {
  View,
  StyleSheet,
  ScrollView,
  Text,
  LayoutAnimation
} from 'react-native'
import BasePage from 'src/pageP/base/base-page/index'
import HomePageHeader from './components/HomepageHeader'
import BriefIntroduction from './components/BriefIntroduction'
import Position from './components/Position'
import CustomButton from 'src/components/button/CustomButton'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { CommonToast, ShowLoading, DismissLoading } from 'src/utils/ToastUtil'

/* redux */
import {
  companyInRecruitPost,
  myCompanyBaseInfo,
  famousInRecruitPost
} from 'src/utils/RequestAPI'
import { connect } from 'react-redux'
import { DO_REQUEST_CHANGE_COMPANY_INFO_ACTION } from 'src/pageB/main/main-page/store/action'
const mapDispatchToProps = dispatch => ({
  doRequestUpdateCompanyInfo(...payload) {
    const promise = DO_REQUEST_CHANGE_COMPANY_INFO_ACTION(...payload)
    dispatch(promise)
    return promise.payload
  }
})
@connect(
  ({ userinfo, BMineCenterStore, landmark }) => ({
    userId: userinfo.C.userId,
    landmark,
    haveCompanyApply: BMineCenterStore.haveCompanyApply
  }), mapDispatchToProps
)

class CompanyHomepage extends BasePage {
  constructor(props) {
    super(props)
    const { navigation: { state: { params: { famousDisplay = false } = {} } } } = this.props
    this.state = {
      header: {
        headerBg: 'transparent'
      },
      initialPage: famousDisplay ? 1 : 0,
      data: {},
      companyId: undefined,
      positionList: []
    }
  }

  childRender() {
    const { navigation: { state: { params: { famousDisplay = false } = {} } } } = this.props
    const { initialPage, data, positionList, companyId } = this.state
    return (
      <ScrollView showsVerticalScrollIndicator={false} style={styles.container}>
        <HomePageHeader jumpBCompanyNameSample={this.jumpBCompanyNameSample} companyId={companyId} initialPage={initialPage} data={data} tabComponent={this.tabComponent} famousDisplay={famousDisplay} />
        <View style={styles.bodyView}>
          {
            initialPage == 0 ? <BriefIntroduction jumpFn={this.jumpFn} data={data} /> : <Position landmark={this.props.landmark} jumpFn={this.jumpFn} positionList={positionList} />
          }
        </View>
      </ScrollView>
    )
  }

  tabComponent = ({ type }) => {
    this.setState({
      initialPage: type
    })
  }

  jumpBCompanyNameSample = ({ data }) => {
    const { doRequestUpdateCompanyInfo, haveCompanyApply: { companyId } } = this.props
    const saveCallback = simpleName => {
      if (simpleName) {
        doRequestUpdateCompanyInfo({ params: { simpleName, companyId } }).then(() => {
          CommonToast('保存成功')
          this.myCompanyBaseInfo()
        })
      }
    }
    this.props.navigation.navigate('CommonInputPage', {
      title: '企业简称',
      desc: '*请填写企业简称',
      placeholder: '请输入',
      maxLength: 10,
      value: data.simpleName || data.companyName || '',
      saveCallback
    })
  }

  componentWillFocus() {
    ShowLoading()
    this.myCompanyBaseInfo().finally(() => {
      DismissLoading()
    })
  }

  componentDidMount() {

  }

  prewClick = () => {
    console.log('prewClick')
  }

  jumpFn = ({ id }) => {
    // CJobdetail
    this.props.navigation.navigate('CJobdetail', { id })
  }

  myCompanyBaseInfo = () => {
    const { navigation: { state: { params: { companyId } } } } = this.props
    return myCompanyBaseInfo({ headers: { companyId } }).then((datas) => {
      // 判断基本信息填写几项
      if (datas.data) {
        const data = datas.data
        data.companyAddress = data.areaProvince == data.areaCity ? (data.areaCity || '') + (data.addressArea || '') + (data.addressDetail || '') : (data.areaProvince || '') + (data.areaCity || '') + (data.addressArea || '')
        // 福利字段进行处理
        let benefitsSize
        try {
          const benefits = (JSON.parse(data.benefits) || []).length
          benefitsSize = `已选${benefits}项`
        } catch (error) {
          benefitsSize = null
        }
        data.benefitsSize = benefitsSize
        data.companyPicUrl = (data.companyPicUrl.split(',') || []).filter(e => e)
        data.companyInfoLength = (data.companyInfo || '').length + '字'
        LayoutAnimation.easeInEaseOut()
        this.setState({
          data,
          companyId
        })
        const { famousId } = data
        return this.companyInRecruitPostFn({ companyId, famousId })
      }
    })
  }

  companyInRecruitPostFn = ({ companyId, famousId }) => {
    const request = famousId ? famousInRecruitPost({ params: { famousId } }) : companyInRecruitPost({ params: { companyId } })
    return request.then((data) => {
      LayoutAnimation.easeInEaseOut()
      this.setState({
        positionList: data.data
      })
    })
  }
}

export default CompanyHomepage

const styles = StyleSheet.create({
  bodyView: {
    backgroundColor: '#fff',
    marginBottom: ScaleS(20),
    marginTop: ScaleS(-20),
    borderTopLeftRadius: ScaleS(20),
    borderTopRightRadius: ScaleS(20),
    overflow: 'hidden'
  },
  tabView: {
    flexDirection: 'row',
    marginLeft: ScaleS(20),
    marginTop: ScaleS(32)
  },
  tabViewYes: {
    alignContent: 'center',
    justifyContent: 'center'
  },
  tabViewNo: {
    justifyContent: 'center'
  },
  tabViewYesName: {
    fontSize: ScaleT(25),
    color: '#000'
  },
  tabViewYesIcin: {
    width: ScaleS(6),
    height: ScaleS(4),
    marginLeft: ScaleS(47),
    fontSize: ScaleT(25),
    borderRadius: ScaleS(4),
    marginTop: ScaleS(8),
    backgroundColor: '#000'
  },
  tabViewNoName: {
    fontSize: ScaleT(20),
    color: 'rgba(0,0,0,0.5)'
  },
  tabViewNoIcon: {
    opacity: ScaleS(0)
  },
  tagPaper: {
    color: 'rgba(255,255,255,0.6)'
  },
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF'
  }
})
